<template>
  <div class="progress-tracking">
    <h2 class="title">我的课程进度</h2>
    
    <!-- 课程进度卡片列表 -->
    <div class="course-list">
      <div v-for="course in courses" :key="course.id" class="course-card">
        <div class="course-info">
          <h3>{{ course.name }}</h3>
          <p class="description">{{ course.description }}</p>
        </div>
        
        <div class="progress-info">
          <div class="progress-bar">
            <div 
              class="progress-fill"
              :style="{ width: `${course.progress}%` }"
              :class="{ completed: course.progress === 100 }"
            ></div>
          </div>
          <span class="progress-text">{{ course.progress }}% 完成</span>
        </div>

        <div class="course-details">
          <p>
            <i class="fas fa-clock"></i>
            开始时间: {{ formatDate(course.startDate) }}
          </p>
          <p>
            <i class="fas fa-calendar-check"></i>
            截止时间: {{ formatDate(course.deadline) }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProgressTracking',
  
  data() {
    return {
      courses: [
        {
          id: 1,
          name: '新员工入职培训',
          description: '了解公司文化及基本工作流程',
          progress: 75,
          startDate: '2024-03-01',
          deadline: '2024-03-31'
        },
        {
          id: 2,
          name: '项目管理基础',
          description: '学习项目管理的基本概念和方法',
          progress: 30,
          startDate: '2024-03-15',
          deadline: '2024-04-15'
        }
        // 更多课程数据...
      ]
    }
  },

  methods: {
    formatDate(dateString) {
      return new Date(dateString).toLocaleDateString('zh-CN')
    }
  }
}
</script>

<style scoped>
.progress-tracking {
  padding: 20px;
}

.title {
  color: #2c3e50;
  margin-bottom: 30px;
}

.course-list {
  display: grid;
  gap: 20px;
}

.course-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.course-info h3 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.description {
  color: #666;
  font-size: 0.9em;
}

.progress-info {
  margin: 20px 0;
}

.progress-bar {
  height: 8px;
  background: #eee;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #42b983;
  transition: width 0.3s ease;
}

.progress-fill.completed {
  background: #42b983;
}

.progress-text {
  display: block;
  margin-top: 5px;
  color: #666;
  font-size: 0.9em;
}

.course-details {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 0.9em;
}

.course-details i {
  margin-right: 5px;
}

@media (max-width: 768px) {
  .course-details {
    flex-direction: column;
    gap: 10px;
  }
}
</style>
